<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/bootstrap-table/1.12.2/bootstrap-table.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/bootstrap-table/1.12.2/extensions/reorder-rows/bootstrap-table-reorder-rows.css" rel="stylesheet">

</head>

<body>
    <div style="width:1000px">
        <table id="tabletest" data-unique-id="idx">

        </table>
    </div>

    <div id="toolbar" class="btn-group">
        <button id="btn_add" type="button" class="btn btn-info btn-sm rightSize">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
    </div>


    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.12.2/bootstrap-table.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.12.2/locale/bootstrap-table-zh-CN.js"></script>
    <script src="https://cdn.bootcss.com/TableDnD/1.0.3/jquery.tablednd.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.12.2/extensions/reorder-rows/bootstrap-table-reorder-rows.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#tabletest").bootstrapTable({
                reorderableRows: true,
                striped: true,
                search: true,
                toolbar: '#toolbar',
                useRowAttrFunc: true,
                columns: [{
                    field: 'idx',
                    title: '编号'
                }, {
                    field: 'name',
                    title: '名称'
                }, {
                    field: 'price',
                    title: '价格'
                }, {
                    field: 'button',
                    title: '操作',
                    events: operateEvents,
                    formatter: operateFormatter
                }],
                data: [{
                    idx: 1,
                    name: 'Item 1',
                    price: '$1'
                }, {
                    idx: 2,
                    name: 'Item 2',
                    price: '$2'
                }]
            });
        });

        $("#btn_add").click(function () {
            var rowCount = $('#tabletest').bootstrapTable('getData').length;
            $('#tabletest').bootstrapTable('append', { 'idx': rowCount + 1, 'name': 'bb', 'price': rowCount + 1 });
        })

        function operateFormatter(value, row, index) {
            return [
                '<button type="button" class="btn btn-default" id="rowDel">删除</button>'
            ].join('');
        };
        window.operateEvents = {
            'click #rowDel': function (e, value, row, index) {
                var uid=$(this).parent().parent().attr("data-uniqueid");
                $('#tabletest').bootstrapTable('removeByUniqueId', uid);
            }
        };

    </script>

</body>

</html>